<template>
  <el-card class="box-card bread">
    <el-row type="flex" justify="space-between">
      <el-col :span="8">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(v, i) in navList" :key="i">
            <span v-if="i == navList.length - 1">{{ v.meta.title }}</span>
            <router-link v-else :to="v.path">{{ v.meta.title }}</router-link>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="16" class="btns">
        <el-button
          type="primary"
          size="small"
          class="btn-right"
          icon="el-icon-s-custom"
          @click="routeToByName('bbs-home')"
          v-if="$route.name.indexOf('home') == -1"
          >用户中心</el-button
        >
        <el-button
          type="primary"
          size="small"
          class="btn-right"
          icon="el-icon-s-home"
          @click="routeToByName('bbs-index')"
          v-if="$route.name.indexOf('index') == -1"
          >论坛首页</el-button
        >
        <el-input
          placeholder="请输入标题"
          v-model="listQuery.title"
          class="input-with-select"
          size="small"
          clearable
          v-if="$route.name.indexOf('index') != -1"
          @input="search"
          style="width: 400px; float: right"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            v-preventReClick
            @click="search"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      navList: [],
      listQuery: {
        title: '',
      },
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.init()
      },
    },
  },
  methods: {
    init() {
      this.navList = this.$route.matched.filter((v) => v.meta && v.meta.title)
    },
    search() {
      this.$bus.$emit('queryManTopic', this.listQuery)
    },
  },
}
</script>
<style scoped lang="scss">
.el-breadcrumb {
  line-height: 32px;
}
.btns {
  button.btn-right {
    float: right;
    margin-left: 10px;
  }
}
</style>